<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript">
var quantity ;
 	$(document).ready(function(){
 		$.ajax({
			"url" : "/MilkProduction/order.do",
			"type" : "post",
			"data" : {"method" : "getOrder"},
			"dataType" : "json",
			"success" : order,
			"error" : function(xhr,dd,error){
			}
		});
 		
 		$(".button").on("click",start);
 		$(".button").on("click",function(){
 			if($(".button").text()=="stop"){
 				$(".button").text("start");
 				
 			}else{
 				$(".button").text("stop");
 			}
 		});
 		
 		$("input").on("keyup",function(){
 			quantity = $("input[name=start]").val();
 			$("#release_page").removeAttr("href").attr("href", "/MilkProduction/release.do?method=releasePageloading&totalBox="+quantity);
 		});
 		
 	});
 	
 	function order(order){
 		$("#orderInfo td:nth-child(1)").append(order.orderNo);
 		$("#orderInfo td:nth-child(2)").append(order.orderDate);
 		$("#orderInfo td:nth-child(3)").append(order.orderer);
 		$("#quantity td").append("<font size='5'>"+order.quantity+"</font>");
 		$("input[name=start]").val(order.quantity);
 		$("#release_page").attr("href", "/MilkProduction/release.do?method=releasePageloading&totalBox="+order.quantity);
 	}
 	
 	function start(){
 		quantity = $("input[name=start]").val();
 		alert(quantity);
 		$.ajax({
			"url" : "/MilkProduction/process.do",
			"type" : "post",
			"data" : {"method" : "productionProcess","quantity":quantity},
			"dataType" : "json",
			"success" : function(msg){
				alert(msg);
			},
			"error" : function(xhr,dd,error){
				alert("ㅠㅠ"+error);
			}
		});
 	}
 
 </script>
 
 <style type="text/css">
table {
        width: 500px;
        border-collapse: collapse;
        text-align: center;
        font-family: 'Trebuchet MS';
    }
    td, th {
        font-size: 10pt;
        border: 1px solid #98bf21;
        height: 30px;
    }
    th {
        background-color:#A7C942;
        color:#ffffff;
        font-family: Georgia;
    }
    tr.alt td {
        color:#000000;
        background-color:#EAF2D3;
    }
    
    .button
{        
 display: inline-block;
 white-space: nowrap;
 background-color: #ccc;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -ms-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
 border: 1px solid #777;
 padding: 0 1.5em;
 margin: 0.5em;
 font: bold 1em/2em Arial, Helvetica;
 text-decoration: none;
 color: #333;
 text-shadow: 0 1px 0 rgba(255,255,255,.8);
 -moz-border-radius: .2em;
 -webkit-border-radius: .2em;
 border-radius: .2em;
 -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
 -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
 box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
{
 background-color: #ddd;        
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
 background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
 background-image: -moz-linear-gradient(top, #fafafa, #ddd);
 background-image: -ms-linear-gradient(top, #fafafa, #ddd);
 background-image: -o-linear-gradient(top, #fafafa, #ddd);
 background-image: linear-gradient(top, #fafafa, #ddd);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');        
}

.button:active
{
 -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 position: relative;
 top: 1px;
}

.button:focus
{
 outline: 0;
 background: #fafafa;
}    

.button:before


{
 background: #ccc;
 background: rgba(0,0,0,.1);
 float: left;        
 width: 1em;
 text-align: center;
 font-size: 1.5em;
 margin: 0 1em 0 -1em;
 padding: 0 .2em;
 -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 -moz-border-radius: .15em 0 0 .15em;
 -webkit-border-radius: .15em 0 0 .15em;
 border-radius: .15em 0 0 .15em;
        pointer-events: none;        
}
    





 
 </style>
<title>Insert title here</title>
</head>
<body>
<table>
	<tr>
		<th>주문번호</th>
		<th>주문날짜</th>
		<th>주문자</th>
	</tr>
	<tr id="orderInfo">
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th colspan="3">주문량</th>
	</tr>
	<tr id="quantity">
		<td colspan="3"></td>
	</tr>	
</table>
<p>
<input type="text" name="start"><button class="button">start</button>
<a id="release_page">출고 페이지가기</a>


</body>
</html>